<template>
  <div class="introduce">
    <CustomTitle title="备课介绍"></CustomTitle>
    <div class="introduceInfo" v-if="isCanLookResult">
      <div class="title">结论</div>
      <div class="content bgBlue">{{ detailsData?.sumary }}</div>
      <div class="content bgBlue" v-for="(item, index) in fileList" :key="index">
        <div class="fileName">{{ item.fileName }}</div>
        <div class="download" @click="downloadFile(item)">
          <i class="el-icon-download"></i>
        </div>
      </div>
    </div>
    <div class="introduceInfo">
      <div class="title">简介</div>
      <div class="content">{{ detailsData?.description }}</div>
    </div>
    <div class="introduceInfo">
      <div class="title">流程</div>
      <div class="content">{{ detailsData?.flow || '无'}}</div>
    </div>
    <div class="introduceInfo" v-if="detailsData?.question || detailsData.qrImg">
      <div class="title">班级群答疑解惑</div>
      <div class="content">{{ detailsData?.question }}</div>
      <img
        v-if="detailsData.qrImg"
        class="qrImg"
        :src="`${$basAssetsUrl}${detailsData.qrImg}`"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import CustomTitle from '@/components/CustomTitle.vue';
import { basAssetsUrl } from '@/utils/baseConfig'
import { getUserInfo } from '@/utils/auth';
import { getTeachFileList } from '@/api/teach'
export default {
  components: { CustomTitle },
  props: {
    detailsData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      fileList: []
    };
  },
  computed: {
    // 是否是发起人
    isCreateUser() {
      return getUserInfo()?.objectId === this.detailsData?.creater;
    },
    // 是否是参与人
    isCanLook() {
      return (
        this.detailsData?.joined || this.isCreateUser
      );
    },
    isCanLookResult() {
      // if(this.detailsData?.status === 'END') {
        if(this.detailsData?.sumaryType === 'PUBLIC') {
          return true
        }
        if(this.detailsData?.sumaryType === 'JOIN' && this.isCanLook) {
          return true
        }
        if(this.detailsData?.sumaryType === 'PRIVATE' && this.isCreateUser) {
          return true
        }
        return false
      // } else {
      //   return false
      // }
    }
  },
  created() {},
  mounted() {
    this.getTeachFileListFn()
  },
  methods: {
    async getTeachFileListFn() {
      const resData = await getTeachFileList({
        relatedId: this.detailsData.objectId
      });
      this.fileList = resData;
    },
    downloadFile(item) {
      const url = basAssetsUrl + item.filePath; // 指向 PDF 文件的 URL
      const link = document.createElement('a');
      link.href = url;
      link.download = item.fileName;
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>
<style lang="scss" scoped>
.basePageBox {
  .introduce {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: $box-shadow;
    margin-top: 32px;
    box-sizing: border-box;
    padding: 20px 20px 60px;
    .introduceInfo {
      margin-top: 24px;
      .title {
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        color: $text-color;
      }
      .content {
        padding: 12px 12px 0;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: $text-color-secondary;
      }
      .bgBlue {
        padding: 12px;
        background: $secondary-color;
        color: $text-color;
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
        .fileName {}
        .download {
          width: 20px;
          height: 20px;
          cursor: pointer;
          i {
            width: 100%;
            height: 100%;
          }
        }
      }
      .qrImg {
        width: 106px;
        height: 106px;
        margin-top: 12px;
        margin-left: 12px;
      }
    }
  }
}
</style>
